<template>
  <el-button @click="playAll" :color="themeColor">
    <span class="iconfont">&#xea6e;</span>{{ name }}
  </el-button>
</template>

<script setup lang="ts">
import { Song } from '@/model'
import { elMessage, getTheme } from '@/utils'
// 配置主题
const boxShadow = getTheme().get('shadow')
const themeColor = getTheme().get('themeColor')

const props = withDefaults(
  defineProps<{
    songs: Song[]
    name?: string
  }>(),
  {
    name: '播放全部'
  }
)

const playAll = () => {}
</script>

<style lang="less" scoped>
@theme-color: v-bind(themeColor);
.el-button {
  .iconfont {
    margin-right: 5px;
  }
  border: none;
  box-shadow: v-bind(boxShadow);
  color: #ffffff;
  border-radius: 18px;
  font-size: 14px;
  width: 120px;
  height: 34px;
}
</style>
